<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>姓名：<input type="text" v-model="name"></p>
    </div>
    <script src="./assets/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                message: 'hello vuejs',
                name: 'jerry'
            },
            /**
             * 侦听器
             * 作用：监听data中数据的变化
             */
            watch: {
                /**
                 * 属性名：侦听器的名称。侦听器的名称必须与侦听的数据名称一致
                 * 属性值：侦听函数
                 * 侦听函数的参数：
                 * 1.新数据：变化之后的数据
                 * 2.老数据：变化之前的数据
                 */
                name: function(newVal, oldVal) {
                    console.log('新数据:', newVal);
                    console.log('老数据:', oldVal);
                }
            }
        });
    </script>
</body>
</html>